<template>
    <div class="consult-modal" @click.self="handleClose">
        <div class="consult-contair">
            <div class="close">
                <el-icon @click="handleClose" class="cursor" style="color: #fff;">
                    <CloseBold />
                </el-icon>
            </div>
            <div class="consult-content">
                <div class="consult-header">
                    欢迎使用绿通云驾校管理系统
                </div>
                <div class="consult-subtitle">
                    您有任何问题都可以联系我们的官方客服进行咨询哦！
                </div>

                <div class="consult-body">
                    <div class="consult-qrcodes">
                        <div class="qrcode-item">
                            <img class="qrcode-img1"
                                src="https://image.lutongjiakao.com/system/ffa8ebce3f1e4d5b868d73d87854c426.png"
                                alt="微信扫码立即咨询" />
                            <div class="qrcode-label">微信扫码立即咨询</div>
                        </div>
                        <div class="qrcode-item">
                            <img class="qrcode-img"
                                src="https://image.lutongjiakao.com/system/063c103947d541a3ae92a4b8f892c52f.jpg"
                                alt="QQ扫码交流" />
                            <div class="qrcode-label1">关注微信公众号</div>
                        </div>
                    </div>
                    <div class="consult-hotline">
                        <div class="hotline-label">咨询热线：</div>
                        <div class="hotline-number">134-7688-3427</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
const emit = defineEmits(['close'])

function handleClose() {
    emit('close')
}
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.consult-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30, 40, 60, 0.25);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;

    .consult-contair {
        position: relative;

        .close {
            position: absolute;
            right: rem(10);
            top: rem(10);
        }
    }
}

.consult-content {
    // background: linear-gradient(135deg, #f8fbff 0%, #e3f0ff 100%);
    background: radial-gradient(100% 711.11% at 100% 13.51%, rgb(17, 200, 178) 0%, rgb(17, 200, 113) 100%);
    border-radius: rem(16);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
    padding: rem(32) rem(32) rem(24) rem(32);
    width: rem(550);
    // max-width: 95vw;
    text-align: center;
}

.consult-header {
    font-size: rem(22);
    font-weight: 600;
    color: #fff;
    margin-bottom: rem(8);
    margin-top: rem(8);
}

.consult-subtitle {
    font-size: rem(13);
    color: #fff;
}

.consult-body {
    display: flex;
    flex-direction: row;
    // align-items: flex-start;
    align-items: center;
    justify-content: center;
    gap: rem(32);
    background-color: #fff;
    padding: rem(10) 0;
    border-radius: rem(8);
    margin-top: rem(30);
}

.consult-qrcodes {
    display: flex;
    flex-direction: row;
    gap: rem(24);
}

.qrcode-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qrcode-img {
    width: rem(125);
    height: rem(125);
}

.qrcode-img1 {
    margin: rem(5) 0 rem(3);
    width: rem(112);
    height: rem(112);

}

.qrcode-label {
    margin-top: rem(8);
    font-size: rem(12);
    color: #000;
}

.qrcode-label1 {
    font-size: rem(12);
    margin-top: rem(3);
    color: #000;
}

.consult-hotline {
    // margin-left: rem(32);
    border-radius: rem(12);
    // padding: rem(16) rem(8);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.hotline-label {
    font-size: rem(14);
    color: #000;
}

.hotline-number {
    font-size: rem(22);
    color: #11c871;
    font-weight: 700;
    letter-spacing: 1px;
}

.hotline-icon {
    width: rem(40);
    height: rem(40);

    img {
        width: 100%;
        height: 100%;
    }
}
</style>